<template>
  <div class="item bg-[#f7f7f7] px-[12px] pt-[12px] pb-[4px]  mb-[10px] cursor-pointer"
       v-debounce="{callback: addItem , params: { type:'input'},delay:500}">
    <a-typography>
      <a-typography-title :level="5" class="pb-[10px] text-left font-14">输入框标题</a-typography-title>
      <a-typography-paragraph class="pointer-events-none">
        <a-input v-model:value="value" placeholder="请输入..."/>
      </a-typography-paragraph>
    </a-typography>
  </div>
  <div class="item bg-[#f7f7f7] px-[12px] pt-[12px] pb-[4px]  mb-[10px] cursor-pointer"
       v-debounce="{callback: addItem , params: { type:'textarea'},delay:500}">
    <a-typography>
      <a-typography-title :level="5" class="pb-[10px] text-left font-14">输入框标题</a-typography-title>
      <a-typography-paragraph class="pointer-events-none">
        <a-textarea v-model:value="value2" placeholder="请输入..." allow-clear/>
      </a-typography-paragraph>
    </a-typography>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import useQuestion from "../../../store/question.js";
import {uuid} from "vue-uuid";
import {storeToRefs} from "pinia";

const questionStore = useQuestion()
let {activeIndex,componentList} = storeToRefs(questionStore)
const inputObj = {
  "type": "questionInput",
  "title": "输入框1",
  "isHidden": false,
  "isLocked": false,
  "props": {
    "title": "输入框标题",
    "placeholder": "请输入..."
  }
}
const textareaObj = {
  "type": "questionTextarea",
  "title": "多行输入",
  "isHidden": false,
  "isLocked": false,
  "props": {
    "title": "输入框标题",
    "placeholder": "请输入..."
  }
}
const addItem = ({type}) => {
  let id = uuid.v1()
  questionStore.changeEditKey('1')
  let preVal = JSON.parse(JSON.stringify(componentList.value))
  questionStore.addSnapshots({
    type: 'add',
    data: preVal
  })
  switch (type) {
    case 'input':
      questionStore.componentList.splice(activeIndex.value + 1, 0, {
        "fe_id": id,
        ...inputObj
      })
      questionStore.changeId(id)
      break;
    case 'textarea':
      questionStore.componentList.splice(activeIndex.value + 1, 0, {
        "fe_id": id,
        ...textareaObj
      })
      questionStore.changeId(id)
      break;
  }
}
let value = ref('')
let value2 = ref('')

</script>

<style scoped>
h3, h1, h2, h4, h5 {
  margin-bottom: 0 !important;
}

div {
  box-sizing: border-box;
}

.item {
  border: 1px solid #fff;
}

.item:hover {
  border: 1px solid #d9d9d9;
}
</style>
